<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>DingDing Admin</title>
    <div th:include="includeJs::bootstrap_js"></div>
    <div th:include="includeJs::layui_js"></div>
</head>
<div class="container-scroller d-flex">
    <div th:replace="includeJs::admin_leftNav"></div>
    <div class="container-fluid page-body-wrapper">
        <div th:replace="includeJs::admin_nav"></div>
        <div class="main-panel" style="height: 800px;">
            <table class="layui-hide" lay-filter="test" id="demo"></table>
            <script type="text/html" id="barDemo">
                <button class="layui-btn layui-btn-sm" lay-event="edit" >修改</button>
            </script>
        </div>
    </div>
</div>
<script type="text/javascript">
    let layer;
    let table;
    layui.use(['table', 'layer'], function(){
        layer = layui.layer;
        table = layui.table;
        table.render({
            elem: '#demo'
            ,height: 500
            ,method:'post'
            ,url: '/admin/intersetList' //数据接口
            ,page: true //开启分页
            ,id:"clientId"
            ,toolbar: '#top' //开启头部工具栏，并为其绑定左侧模板
            ,cols: [
                [ //表头
                     {field: 'tid', title: '编号', width:80, sort: true, fixed: 'left'}
                    ,{field: 'type', title: '借贷类型', width:100}
                    ,{field: 'yearInterset', title: '年利率(%)', width:120}
                    ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
                ]
            ]
        })
        //监听工具条
        table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            let data = obj.data; //获得当前行数据
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let tr = obj.tr; //获得当前行 tr 的DOM对象
            if(layEvent === 'edit'){ //修改
                let id = data.tid;
                //iframe层-父子操作
                layer.open({
                    type: 2,
                    area: ['700px', '450px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: '/admin/interset/'+id
                });
            }})
    });
</script>
</body>
</html>